<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1,viewport-fit=cover"
    />
    <title>游乐园</title>
    <!-- 引入图标 -->
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <!-- 引入 common.css 公共样式 -->
    <link rel="stylesheet" href="./styles/common.css" />
    <!-- 引入 index.css 首页样式 -->
    <link rel="stylesheet" href="./styles/index.css" />
    <!-- 方式1：使用在线的链接，必须要联网才能访问，并补充 http:  -->
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2467737_pt4u2dp6n.css" />
    <!-- 方式2：使用本地文件，需要把字体文件下载到本地，并引入样式表 -->
    <!-- <link rel="stylesheet" href="./fonts/iconfont.css" /> -->
  </head>
  <body>
    <!-- 1.0 首页焦点图部分 -->
    <div class="banner">
      <img src="./uploads/banner_1.png" alt="" />
    </div>
    <!-- 2.0 乐园活动 -->
    <div class="activity">
      <div class="activity-head">乐园活动</div>
      <div class="activity-body">
        <!-- 单个活动开始 -->
        <div class="activity-item">
          <img class="activity-item-img" src="./uploads/item_1.png" alt="" />
          <div class="activity-item-detail">
            <h3>疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动</h3>
            <span>免费</span>
          </div>
          <div class="activity-item-info">
            <span><i class="iconfont icon-flag"></i>200人已报名</span>
            <span><i class="iconfont icon-shizhong"></i>本周六开始</span>
          </div>
          <!-- 活动状态 -->
          <div class="activity-item-state">进行中</div>
          <!-- 收藏 -->
          <div class="activity-item-collect"></div>
          <div class="activity-item-mask"></div>
        </div>
        <!-- 单个活动结束 -->
        <!-- 单个活动开始2 -->
        <div class="activity-item">
          <img class="activity-item-img" src="./uploads/item_2.png" alt="" />
          <div class="activity-item-detail">
            <h3>疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动</h3>
            <span>免费</span>
          </div>
          <div class="activity-item-info">
            <span><i class="iconfont icon-flag"></i>200人已报名</span>
            <span><i class="iconfont icon-shizhong"></i>本周六开始</span>
          </div>
          <!-- 活动状态2: 已截止 -->
          <div class="activity-item-state activity-item-state-abort">已截止</div>
          <!-- 收藏 -->
          <div class="activity-item-collect"></div>
          <div class="activity-item-mask"></div>
        </div>
        <!-- 单个活动结束2 -->
      </div>
    </div>
    <!-- 3.0 底部导航栏 -->
    <div class="tabBar">
      <a class="tabBar-item tabBar-item-active" href="#">
        <i class="iconfont icon-shouye"></i>
        <span>首页</span>
      </a>
      <a class="tabBar-item" href="#">
        <i class="iconfont icon-coupon"></i>
        <span>卡券</span>
      </a>
      <a class="tabBar-item" href="#">
        <i class="iconfont icon-wode2"></i>
        <span>我的</span>
      </a>
    </div>
  </body>
</html>
